<template>
  <div>
    <div class="main">
      <eagle-input
        class="input_text"
        readonly
        label="任命书类别"
        v-model="form.AppointmentTypeName"
        name="AppointmentTypeName"
        is-link
        required
        @click="_chooseAppointmentType"
      >
      </eagle-input>

      <eagle-input
        label="文件名称"
        v-model="form.Name"
        name="Name"
        required
      >
      </eagle-input>

      <eagle-file-upload
        @CallBack="_fileUploadCb"
        :attachs="form.Attachs"
        :labelName="'签名文件'"
        :mustInput="true"
      />

      <div class="btn_submit">
        <eagle-button
          block
          type="info"
          @click="submit"
        > 提交 </eagle-button>
      </div>
    </div>
    <eagle-dialog
      v-model="showAppointmentType"
      v-if="showAppointmentType"
      title="请选择任命书类别"
      :showButtons="false"
      :closeOnClickOverlay="true"
    >
      <eagle-form>
        <van-field
          class="input_text"
          name="radio"
          label=""
        >
          <template #input>
            <eagle-radio-group
              v-model="form.AppointmentType"
              @change="radioChange"
              direction="horizontal"
            >
              <template v-for="(item, index) in form.AppointmentTypeList">
                <eagle-radio
                  :name="item.ID"
                  :key="index"
                >{{
                  item.Name
                }}</eagle-radio>
              </template>
            </eagle-radio-group>
          </template>
        </van-field>
        <div style="margin: 16px"></div>
      </eagle-form>
    </eagle-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import store from "@/store/index";

export default {
  data() {
    return {
      id: this.$route.query.id,
      radio: "1",
      value: "",
      form: {
        Attachs: "",
      },
      showAppointmentType: false,
    };
  },

  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },

  created() {
    if (this.$route.query.id != null) {
      (this.id = this.$route.query.id), this.getDetail();
    }

    this.calcTitle();
    console.log("id", this.$route.query.id);
  },
  methods: {
    calcTitle() {
      let title = "安全管理机构人员任命[新增]";
      if (this.id == "0") {
        title = "安全管理机构人员任命[新增]";
      } else {
        title = "安全管理机构人员任命[编辑]";
      }
      store.commit("updateTitle", title);
    },

    _fileUploadCb(attachs) {
      this.form.Attachs = attachs;
    },

    radioChange(names) {
      let select = this.form.AppointmentTypeList.filter(
        (item) => item.ID == names
      );
      this.form.AppointmentTypeName = select[0].Name;
      this.form.AppointmentType = select[0].ID;

      this.showAppointmentType = false;
    },
    getDetail() {
      let params = { id: this.id };
      if (this.id == 0) {
        this.$axios
          .get("/SiteAppointment/InitEntity", { params: params })
          .then((res) => {
            this.form = res.data;
          });
      } else {
        this.$axios
          .get("/SiteAppointment/GetDetail", { params: params })
          .then((res) => {
            for (var i = 0; i < res.data.AppointmentTypeList.length; i++) {
              let item = res.data.AppointmentTypeList[i];
              if (item.ID == res.data.AppointmentType) {
                res.data.AppointmentTypeName = item.Name;
                break;
              }
            }
            this.form = res.data;
          });
      }
    },

    // 任命书类别
    _chooseAppointmentType() {
      this.showAppointmentType = true;
    },

    submit() {
      if (!this.form.AppointmentTypeName) {
        return this.$toast("请选择任命书");
      }
      if (!this.form.Name) {
        return this.$toast("请输入文件名称");
      }

      if (!this.form.Attachs) {
        return this.$toast("请选择签名文件");
      } else {
        if (this.form.Attachs.length == 0) {
          return this.$toast("请选择签名文件");
        }
      }
      let form1 = this.form;
      form1.CompanyCode = this.CompanyCode;
      this.$axios
        .post("/SiteAppointment/Edit", form1)
        .then((res) => {
          this.loading = false;
          this.$toast.success("保存成功！");
          setTimeout(() => {
            this.$router.goRefresh(-1);
          }, 300);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="less" >
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
</style>
